<!--道具图标-->
<script setup>

import {replaceResource} from "@/assets/js/routerUtils";
import {formatDate} from "@ginstone/common-utils/dist/src/utils/DateUtils";
import {TradeBit} from "@ginstone/nga-api/dist/src/enums/TradeBit";
import {ItemType} from "@ginstone/nga-api/dist/src/enums/ItemType";
import UserMoney from "@/components/common/UserMoney.vue";

const props = defineProps({
  data: {type: Object, required: true},
})

const emit = defineEmits(['item-click']);

</script>

<template>
  <el-tooltip v-if="data ">
    <template #content>
      <div v-if="data.hasOwnProperty('typeInfo') ">名称: {{ data.typeInfo.name }}</div>
      <div v-if="data.hasOwnProperty('count')">数量: {{ data.count }}</div>
      <div v-if="data.hasOwnProperty('time')">创建于: {{ formatDate(data.time) }}</div>
      <div v-if="data.hasOwnProperty('price') && data.hasOwnProperty('tradeBit')">价格:
        <user-money v-if="data.tradeBit===TradeBit.COPPER" :data="data.price"/>
        <span v-if="data.tradeBit===TradeBit.N">{{ data.price }}</span>
      </div>
      <div v-if="data.hasOwnProperty('type')">类型:&nbsp;
        <span v-if="data.type===ItemType.ACTIVATION_CODE">激活码</span>
        <span v-if="data.type===ItemType.MEDAL">徽章</span>
        <span v-if="data.type===ItemType.TO_REPLY">对回复使用的道具</span>
        <span v-if="data.type===ItemType.TO_USER">对用户使用的道具</span>
      </div>
      <div v-if="data.hasOwnProperty('typeInfo') ">描述: {{ data.typeInfo.description }}</div>
      <div v-if="data.hasOwnProperty('typeInfo') && data.typeInfo.hasOwnProperty('permissionBuyStore')">要求: {{ data.typeInfo.permissionBuyStore }}</div>
    </template>
    <div class="clickable" style="display: inline-block" @click="$emit('item-click',data)">
      <el-image v-if="data.hasOwnProperty('url')" :src="replaceResource(data.url)" style="height: 32px;width: 32px;margin-right: 5px"/>
      <br>
      <span v-if="data.hasOwnProperty('typeInfo')">
        {{ data.typeInfo.name.substring(0, 2) }}
      </span>
    </div>
  </el-tooltip>
</template>

<style scoped>

</style>